import React, { useState } from "react";
import { Tree } from "antd";
import {
    EditOutlined,
    PlusOutlined,
    MinusOutlined,
} from "@ant-design/icons";
import PopconfirmWrapper from "../../containers/Feedback/Popconfirm/Popconfirm.styles";

import Popconfirms from '@iso/components/Feedback/Popconfirm';

const { TreeNode } = Tree;
const Popconfirm = (props) => (
    <PopconfirmWrapper>
        <Popconfirms {...props} />
    </PopconfirmWrapper>
);

export default function EditableTree(props) {

    const  treeData=props.data

    const renderTreeNodes = (data) => {

        let nodeArr = (data||[]).map((treeNodeData) => {

            if(treeNodeData['readyEdit']==undefined){
                treeNodeData.title = (
                    <div>
                        <span>{treeNodeData.title}</span>
                        <span>
                            <EditOutlined style={{ marginLeft: 10 }}  onClick={()=>{props.clickOnEdit(treeNodeData)}} />
                            <PlusOutlined style={{ marginLeft: 10  }} onClick={()=>{props.clickOnAdd(treeNodeData.id)}} />
                             <Popconfirm
                                 title="确定要执行删除操作吗？"
                                 okText="是"
                                 cancelText="否"
                                 onConfirm={()=>{props.clickOnDelete(treeNodeData.id)}}

                             >
                                   <MinusOutlined style={{ marginLeft: 10 }}  />
                             </Popconfirm>
                       </span>
                    </div>
                );
            }
            //use this flag to fix more and more title when state change bug
            treeNodeData['readyEdit']=true;
            if (treeNodeData.children) {
                return (
                    <TreeNode title={treeNodeData.title} key={treeNodeData.key} dataRef={treeNodeData}>
                        {renderTreeNodes(treeNodeData.children)}
                    </TreeNode>
                );
            }

            return <TreeNode title={treeNodeData.title} key={treeNodeData.key} />;
        });

        return nodeArr;
    };

    return (
        <div>
            <Tree>{renderTreeNodes(treeData)}</Tree>
        </div>
    );
}

